<template>
  <div class="home">
    {{name}}
    <button @click="changeName">修改用户名</button>
    <br>
    <br>
    ref ==== number = {{number}}
    <button @click="add">add</button>
    <h3 @click="color = 'blue'">这是我要改变颜色的元素</h3>
  </div>
</template>

<script>

// reactive 输入vue3的一个组合api vue3中新增的最核心的功能就是组合api
// reactive vue3建议只用来声明对象 他声明的对象中的每一个属性都是响应式的
// 他是结合es6的proxy 结合递归给每一个reactive声明的对象数据添加上 setter/getter方法 从而实现数据的响应式
import home from '../utils/home.js'
import { toRefs, ref, readonly } from 'vue'
// ref是用reactive封装成的一个方法 这个方法我们通常用来声明基本数据类型和数组数据
// ref声明的数据是一个对象 值是value ref在使用的时候不需要写value 但是赋值的时候必须写value
export default {
  name: 'Home',
  setup(props) {
    let number = ref(123)
    const color = ref('red')
    function add() {
      number.value++
    }

    return {
      ...toRefs(home), // toRefs可以解构reactive对象的属性 将属性取出 转换成一个ref对象
      number,
      add,
      color
    }
  }
}
</script>
<style scoped lang="scss">
  h3 {
    color: v-bind(color);
  }
</style>

